<template>
	<view class="djs" :style="{'color':color,'font-size':fontSize+'rpx'}">
		<text :style="{'color':color,'font-size':fontSize+'rpx'}">{{text}}</text>&nbsp;
		<u-count-down
				:time="djsTime"
				format="mm:ss"
				autoStart
				millisecond
				@finish="finish"
				@change="onChange"
			>
				<view class="time">
					<text class="time__item" :style="{'color':color,'font-size':fontSize+'rpx'}">{{ timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes}}分</text>
					<text class="time__item" :style="{'color':color,'font-size':fontSize+'rpx'}">{{ timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds}}秒</text>
				</view>
		</u-count-down>
	</view>
</template>

<script>
	export default {
		options: {
			styleIsolation: 'shared'
		},
		props:{
			text:{
				typeof:String,
				default:'待支付 剩余'
			},
			djsTime:{
				typeof:Number,
				default:0
			},
			color:{
				typeof:String,
				default:'#FEB000'
			},
			fontSize:{
				typeof:Number,
				default:26
			}
		},
		data(){
			return {
				timeData: {},
			}
		},
		methods:{
			onChange(e) {
				this.timeData = e;
			},
			finish(){
				this.$emit('finish');
			}
		}
	}
</script>

<style scoped lang="less">
	.djs{
		display: flex;
		align-items: center;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
	}
</style>